﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Fx/Fx.Morph</title>
</head>

<body>
  <div id="docs" class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Fx-Morph">Fx.Morph</a></h4>
			<div class="menu-item"><a href="#Fx-Morph:set">set</a></div>
			<div class="menu-item"><a href="#Fx-Morph:start">start</a></div>
			<h4 class="menu-item"><a href="#Element-Properties">Element.Properties</a></h4>
			<div class="menu-item"><a href="#Element-Properties:morph">morph</a></div>
			<h4 class="menu-item"><a href="#Element">Element</a></h4>
			<div class="menu-item"><a href="#Element:morph">morph</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Fx-Morph"><a href="#Fx-Morph">Class: Fx.Morph</a></h1>

<p class="description">Allows for the animation of multiple CSS properties at once, even by a simple CSS selector. Inherits methods, properties, options and events from <a href="fx.html">Fx</a>.</p>

<h3>Extends:</h3>

<ul>
<li><a href="fx.html">Fx</a></li>
</ul>
<h3>Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Morph</span><span class="br0">(</span>element<span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>element - (<em>mixed</em>) A string ID of the Element or an Element to apply the style transitions to.</li>
<li>options - (<em>object</em>, optional) The <a href="fx.html">Fx</a> options object.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) A new Fx.Morph instance.</li>
</ul>
<h3>Examples:</h3>

<p>Multiple styles with start and end values using an object:</p>

<pre class="javascript"><span class="kw2">var</span> myEffect = <span class="kw2">new</span> Fx.<span class="me1">Morph</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="br0">{</span>
    duration: <span class="st0">'long'</span>,
    transition: Fx.<span class="me1">Transitions</span>.<span class="me1">Sine</span>.<span class="me1">easeOut</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
myEffect.<span class="me1">start</span><span class="br0">(</span><span class="br0">{</span>
    <span class="st0">'height'</span>: <span class="br0">[</span><span class="nu0">10</span>, <span class="nu0">100</span><span class="br0">]</span>, <span class="co1">// Morphs the 'height' style from 10px to 100px.</span>
    <span class="st0">'width'</span>: <span class="br0">[</span><span class="nu0">900</span>, <span class="nu0">300</span><span class="br0">]</span>  <span class="co1">// Morphs the 'width' style from 900px to 300px.</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<p>Multiple styles with the start value omitted will default to the current Element's value:</p>

<pre class="javascript"><span class="kw2">var</span> myEffect = <span class="kw2">new</span> Fx.<span class="me1">Morph</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="br0">{</span>
    duration: <span class="st0">'short'</span>,
    transition: Fx.<span class="me1">Transitions</span>.<span class="me1">Sine</span>.<span class="me1">easeOut</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
myEffect.<span class="me1">start</span><span class="br0">(</span><span class="br0">{</span>
    <span class="st0">'height'</span>: <span class="nu0">100</span>, <span class="co1">// Morphs the height from the current to 100px.</span>
    <span class="st0">'width'</span>: <span class="nu0">300</span>   <span class="co1">// Morphs the width from the current to 300px.</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<p>Morphing one Element to match the CSS values within a CSS class. This is useful when
separating the logic and styles:</p>

<pre class="javascript"><span class="kw2">var</span> myEffect = <span class="kw2">new</span> Fx.<span class="me1">Morph</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="br0">{</span>
    duration: <span class="nu0">1000</span>,
    transition: Fx.<span class="me1">Transitions</span>.<span class="me1">Sine</span>.<span class="me1">easeOut</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="co1">// the styles of myClassName will be applied to the target Element.</span>
myEffect.<span class="me1">start</span><span class="br0">(</span><span class="st0">'.myClassName'</span><span class="br0">)</span>;
</pre>

<h3>Notes:</h3>

<ul>
<li>This feature only works for simple selectors like a single class or id due to limited browser support for complex selectors.</li>
</ul>
<h3>See Also:</h3>

<ul>
<li><a href="fx.html">Fx</a></li>
</ul>
<h2 id="Fx-Morph:set"><a href="#Fx-Morph:set">Fx.Morph Method: set</a></h2>

<p class="description">Sets the Element's CSS properties to the specified values immediately.</p>

<h3>Syntax:</h3>

<pre class="javascript">myFx.<span class="me1">set</span><span class="br0">(</span>to<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>properties - (<em>mixed</em>) Either an <em>object</em> of key/value pairs of CSS attributes to change or a <em>string</em> representing a CSS selector which can be found within the CSS of the page.  If only one value is given for any CSS property, the transition will be from the current value of that property to the value given.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) This Fx.Morph instance.</li>
</ul>
<h3>Examples:</h3>

<pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Morph</span><span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="br0">{</span>
    <span class="st0">'height'</span>: <span class="nu0">200</span>,
    <span class="st0">'width'</span>: <span class="nu0">200</span>,
    <span class="st0">'background-color'</span>: <span class="st0">'#f00'</span>,
    <span class="st0">'opacity'</span>: <span class="nu0">0</span>
<span class="br0">}</span><span class="br0">)</span>;
<span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Morph</span><span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'.myClass'</span><span class="br0">)</span>;
</pre>

<h2 id="Fx-Morph:start"><a href="#Fx-Morph:start">Fx.Morph Method: start</a></h2>

<p class="description">Executes a transition for any number of CSS properties in tandem.</p>

<h3>Syntax:</h3>

<pre class="javascript">myFx.<span class="me1">start</span><span class="br0">(</span>properties<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>properties - (<em>mixed</em>) An <em>object</em> of key/value pairs of CSS attributes to change or a <em>string</em> representing a CSS selector which can be found within the CSS of the page.
If only one value is given for any CSS property, the transition will be from the current value of that property to the value given.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) This Fx.Morph instance.</li>
</ul>
<h3>Examples:</h3>

<pre class="javascript"><span class="kw2">var</span> myEffects = <span class="kw2">new</span> Fx.<span class="me1">Morph</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="br0">{</span>duration: <span class="nu0">1000</span>, transition: Fx.<span class="me1">Transitions</span>.<span class="me1">Sine</span>.<span class="me1">easeOut</span><span class="br0">}</span><span class="br0">)</span>;
&nbsp;
myEffects.<span class="me1">start</span><span class="br0">(</span><span class="br0">{</span>
    <span class="st0">'height'</span>: <span class="br0">[</span><span class="nu0">10</span>, <span class="nu0">100</span><span class="br0">]</span>,
    <span class="st0">'width'</span>: <span class="br0">[</span><span class="nu0">900</span>, <span class="nu0">300</span><span class="br0">]</span>,
    <span class="st0">'opacity'</span>: <span class="nu0">0</span>,
    <span class="st0">'background-color'</span>: <span class="st0">'#00f'</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>Notes:</h3>

<ul>
<li>If a string is passed as the CSS selector, the selector must be identical to the one within the CSS.</li>
<li>Multiple selectors (with commas) are not supported.</li>
<li>@import'ed CSS rules will not be available for Morph calls. All CSS selectors must be present in CSS directly loaded into the page.</li>
</ul>
<h1 id="Element-Properties"><a href="#Element-Properties">Object: Element.Properties</a></h1>

<p class="description">see <a href="../Element/Element.html#Element-Properties">Element.Properties</a></p>

<h2 id="Element-Properties:morph"><a href="#Element-Properties:morph">Element Property: morph</a></h2>

<h3 class="description">Setter</h3>

<p>Sets a default Fx.Morph instance for an Element.</p>

<h4>Syntax:</h4>

<pre class="javascript">el.<span class="me1">set</span><span class="br0">(</span><span class="st0">'morph'</span><span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h4>Arguments:</h4>

<ol>
<li>options - (<em>object</em>, optional) The Fx.Morph options.</li>
</ol>
<h4>Returns:</h4>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h4>Examples:</h4>

<pre class="javascript">el.<span class="me1">set</span><span class="br0">(</span><span class="st0">'morph'</span>, <span class="br0">{</span>duration: <span class="st0">'long'</span>, transition: <span class="st0">'bounce:out'</span><span class="br0">}</span><span class="br0">)</span>;
el.<span class="me1">morph</span><span class="br0">(</span><span class="br0">{</span>height: <span class="nu0">100</span>, width: <span class="nu0">100</span><span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>Getter</h3>

<p>Gets the default Fx.Morph instance for the Element.</p>

<h4>Syntax:</h4>

<pre class="javascript">el.<span class="me1">get</span><span class="br0">(</span><span class="st0">'morph'</span><span class="br0">)</span>;
</pre>

<h4>Arguments:</h4>

<ol>
<li>property - (<em>string</em>) the Fx.Morph property argument.</li>
</ol>
<h4>Returns:</h4>

<ul>
<li>(<em>object</em>) The Fx.Morph instance.</li>
</ul>
<h4>Examples:</h4>

<pre class="javascript">el.<span class="me1">set</span><span class="br0">(</span><span class="st0">'morph'</span>, <span class="br0">{</span>duration: <span class="st0">'long'</span>, transition: <span class="st0">'bounce:out'</span><span class="br0">}</span><span class="br0">)</span>;
el.<span class="me1">morph</span><span class="br0">(</span><span class="br0">{</span>height: <span class="nu0">100</span>, width: <span class="nu0">100</span><span class="br0">}</span><span class="br0">)</span>;
el.<span class="me1">get</span><span class="br0">(</span><span class="st0">'morph'</span><span class="br0">)</span>; <span class="co1">// the Fx.Morph instance.</span>
</pre>

<h1 id="Element"><a href="#Element">Type: Element</a></h1>

<h2 id="Element:morph" class="description"><a href="#Element:morph">Element Method: morph</a></h2>

<p class="description">Animates an Element given the properties passed in.</p>

<h3>Syntax:</h3>

<pre class="javascript">myElement.<span class="me1">morph</span><span class="br0">(</span>properties<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>properties - (<em>mixed</em>) The CSS properties to animate. Can be either an object of CSS properties or a string representing a CSS selector.  If only one value is given for any CSS property, the transition will be from the current value of that property to the value given.</li>
</ol>
<h3>Returns:</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Example:</h3>

<p>With an object:</p>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">morph</span><span class="br0">(</span><span class="br0">{</span>height: <span class="nu0">100</span>, width: <span class="nu0">200</span><span class="br0">}</span><span class="br0">)</span>;
</pre>

<p>With a selector:</p>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">morph</span><span class="br0">(</span><span class="st0">'.class1'</span><span class="br0">)</span>;
</pre>

<h3>See Also:</h3>

<ul>
<li><a href="#Fx-Morph">Fx.Morph</a></li>
</ul>

    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
